<template>
  <Grid :col="4" :border="false" padding="5px">
    <GridItem>
      <Button icon="md-add-circle" type="primary" @click="$emit('add-role')" style="margin-right: 5px">添加角色</Button>
      <Button icon="ios-remove-circle-outline" type="error" @click="$emit('batch-remove')">批量删除</Button>
    </GridItem>
    <GridItem><Input  placeholder="请输入角色名" /></GridItem>
    <GridItem>
      <Select style="width:100%" clearable  placeholder="请选择角色状态">
        <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </GridItem>
    <GridItem><Button icon="md-search" type="primary">查询</Button></GridItem>
  </Grid>
</template>
<script>

import {defineComponent} from 'vue'

export default defineComponent({
  data() {
    return {
      statusList: [{label: '正常',  value: 0},  {label: '失效', value : 1}]
    }
  },
  emits: ["add-role", "batch-remove"]
})
</script>

<style scoped>

</style>